import React from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import { ConfettiCannonExample } from './components/ConfettiCannonExample';
import { AutoStartTrue } from './components/AutoStartTrue';
import { AutoStartFalse } from './components/AutoStartFalse'
import { AutoStartDelay3000 } from './components/AutoStartDelay3000';
import { AutoStartDelay5000 } from './components/AutoStartDelay5000';
import {NavigationContainer, Page} from './Navigation';

function ConfettiCannonDemo() {
  // renders
  return (
    <View style={styles.container}>
      <SafeAreaView>
        <NavigationContainer>
          <Page name='ConfettiCannonExample'><ConfettiCannonExample></ConfettiCannonExample></Page>
          <Page name='AutoStartTrue'><AutoStartTrue></AutoStartTrue></Page>
          <Page name='AutoStartFalse'><AutoStartFalse></AutoStartFalse></Page>
          <Page name='AutoStartDelay3000'><AutoStartDelay3000></AutoStartDelay3000></Page>
          <Page name='AutoStartDelay5000'><AutoStartDelay5000></AutoStartDelay5000></Page>
        </NavigationContainer>
      </SafeAreaView>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: 'grey',
  },
});


export const displayName = 'Confetti Cannon';
export const framework = 'React';
export const category = 'UI';
export const title = 'ConfettiCannon';
export const description = 'React Native Confetti Cannon';

export const examples = [
  {
    title: 'React Native ConfettiCannon',
    render: function (): any {
      return <ConfettiCannonDemo />;
    },
  },
];